<script setup>
import {
  Edit, Delete, Position, Upload
} from '@element-plus/icons-vue'

import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  addstaffservice, getpartpathservice, getalljobsservice, getpartstaffservice,
  updatepathservice, deletepathservice, deletestaffservice, updatestaffservice,

} from '@/api/book.js'

import {
  getAllApprovalservice, addApprovalservice, getApprovalByContractIdservice

} from '@/api/approval.js'


import {
  userInfoService,
  userLoginService
} from '@/api/user.js'
//控制添加分类弹窗
const dialogVisible = ref(false)
//分页条数据模型
//const pageNum = ref(1)//当前页
const total = ref(20)//总条数
//const pageSize = ref(3)//每页条数
//文章分类数据模型

//定义变量，控制标题
const title = ref('')

//交通路线列表数据模型
const majors = ref([])

const alljobs = ref([])
//与后端交互的json数据
const pathmodel = ref({
  id: null,
  contractid: null,
  userid: null,
  nodes: null,
  actiontime: null,
  phase: null,
  sjjd: null,
  scjd: null,
  zzjd: null,
  zpjd: null,
  cgjd: null,
  contract: {
    name: null
  },
  user: {
    name: null
  }
})

const commitpathmodel = ref({
  id: null,
  contractid: null,
  userid: null,
  nodes: null,
  actiontime: null,
  phase: null,
  sjjd: null,
  scjd: null,
  zzjd: null,
  zpjd: null,
  cgjd: null,

})

const findmodel = ref({
  pageNum: 1,
  pageSize: 5,
  str: '',
  findType: ''

})
const stafflist = async () => {
  console.log(findmodel.value);
  let userresult = await userInfoService();
  findmodel.value.findType = userresult.data.id;


  let result = await getAllApprovalservice(findmodel.value);
  // console.log("关键人物数据是1" + JSON.stringify(findmodel.value));
  // console.log("关键人物数据是" + JSON.stringify(result.data));
  total.value = result.data.total;
  majors.value = result.data.items;
}
stafflist();
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  findmodel.value.pageSize = size;
  stafflist();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  findmodel.value.pageNum = num;
  stafflist();
}
const cleardata = () => {
  findmodel.value.str = null
}
//表单校验
const rules = {
  name: [
    { required: true, message: '请输入专业名称', trigger: 'blur' },
  ],
  introduction: [
    { required: true, message: '请输入专业简介', trigger: 'blur' },
  ],

}



const addapproval = async () => {
  console.log(pathmodel.value);

  commitpathmodel.value.id = pathmodel.value.id;
  commitpathmodel.value.contractid = pathmodel.value.contractid;
  commitpathmodel.value.userid = pathmodel.value.userid;
  commitpathmodel.value.nodes = pathmodel.value.nodes;
  commitpathmodel.value.actiontime = pathmodel.value.actiontime;

  commitpathmodel.value.actiontime = pathmodel.value.actiontime


  commitpathmodel.value.phase = pathmodel.value.phase;
  commitpathmodel.value.sjjd = pathmodel.value.sjjd;

  commitpathmodel.value.cgjd = pathmodel.value.cgjd;
  commitpathmodel.value.scjd = pathmodel.value.scjd;
  commitpathmodel.value.zzjd = pathmodel.value.zzjd;
  commitpathmodel.value.zpjd = pathmodel.value.zpjd;


  commitpathmodel.value.phase = '已提交';
  let result = await addApprovalservice(commitpathmodel.value);
  console.log(result);
  if (result.code == 0) {
    ElMessage.success("修改成功")
    dialogVisible.value = false;
    stafflist();
  }
  else {
    ElMessage.error(result.message ? result.message : '添加修改')
  }
}




//展示编辑弹窗
const showDialog = (row) => {
  title.value = '编辑合同执行动态信息';
  dialogVisible.value = true;
  //数据拷贝

  pathmodel.value.id = row.id;
  pathmodel.value.contractid = row.contractid;
  pathmodel.value.userid = row.userid;
  pathmodel.value.nodes = row.nodes;
  pathmodel.value.actiontime = row.actiontime;

  const date = new Date(pathmodel.value.actiontime);

date.setHours(date.getHours() + 8);
pathmodel.value.actiontime = date.toISOString();


  pathmodel.value.phase = row.phase;
  pathmodel.value.sjjd = row.sjjd;
  pathmodel.value.contract.name = row.contract.name;
  pathmodel.value.user.name = row.user.name;
  pathmodel.value.scjd = row.scjd;
  pathmodel.value.zzjd = row.zzjd;
  pathmodel.value.zpjd = row.zpjd;
  pathmodel.value.cgjd = row.cgjd;
  console.log("关键人物数据是" + JSON.stringify(row));

}






</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>合同执行动态管理</span>

      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form>
      <el-form-item label="查询条件:">
        <el-input v-model="findmodel.str" placeholder="请输入查询内容" style="width: 300px"></el-input>
        <el-button type="primary" @click="stafflist" style="margin-left: 15px;">搜索</el-button>
        <el-button @click="cleardata">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 文章列表 -->
    <el-table :data="majors" style="width: 100%">
      <el-table-column label="合同编号" prop="contractid"></el-table-column>
      <el-table-column label="合同名称" prop="contract.name"></el-table-column>
      <el-table-column label="设计进度" prop="sjjd"></el-table-column>
      <el-table-column label="生成进度" prop="scjd"></el-table-column>
      <el-table-column label="采购进度" prop="cgjd"></el-table-column>
      <el-table-column label="制造进度" prop="zzjd"></el-table-column>
      <el-table-column label="装配进度" prop="zpjd"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)" ></el-button>

        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="findmodel.pageNum" v-model:page-size="findmodel.pageSize"
      :page-sizes="[5, 10, 15, 20]" layout="jumper, total, sizes, prev, pager, next" background :total="total"
      @size-change="onSizeChange" @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end" />
  </el-card>
  <!-- 添加分类弹窗 -->


  <el-dialog v-model="dialogVisible" :title="title" width="60%">
    <div class="basic-info-border">
      <el-row gutter="20">
        <el-col :span="11">
          <el-form-item label="合同编号" prop="contractid" :label-width="70">
            <el-input v-model="pathmodel.id" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="合同名称" prop="name" :label-width="70">
            <el-input v-model="pathmodel.contract.name" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row gutter="20">
        <el-col :span="11">
          <el-form-item label="结点" prop="nodes" :label-width="70">
            <el-input v-model="pathmodel.nodes" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="11">
          <el-form-item label="操作时间" prop="actiontime" :label-width="70">
            <el-input v-model="pathmodel.actiontime" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row gutter="20">
        <el-col :span="11">
          <el-form-item label="操作者" prop="user" :label-width="70">
            <el-input v-model="pathmodel.user.name" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="状  态" prop="phase" :label-width="70">
            <el-input v-model="pathmodel.phase" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <div class="basic-info-border2">
      <el-row gutter="20">
        <el-col :span="11">
          <el-form-item label="设计进度" prop="sjjd" :label-width="70">
            <el-input v-model="pathmodel.sjjd"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="生产进度" prop="scjd" :label-width="70">
            <el-input v-model="pathmodel.scjd"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row gutter="20">
        <el-col :span="11">
          <el-form-item label="采购进度" prop="cgjd" :label-width="70">
            <el-input v-model="pathmodel.cgjd"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="11">
          <el-form-item label="制造进度" prop="zzjd" :label-width="70">
            <el-input v-model="pathmodel.zzjd"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row gutter="20">


        <el-col :span="11">
          <el-form-item label="装配进度" prop="zpjd" :label-width="70">
            <el-input v-model="pathmodel.zpjd"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addapproval"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}


.basic-info-border {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    right: -10px;
    position: relative;
    padding-top: 30px;
    /* 增加内边距，为标题留出更多空间 */
    margin-right: 0px;
    /* 调整外边距，使边框线不重合 */
}

.basic-info-border::before {
    content: "审批流程信息";
    position: absolute;
    top: -15px;
    /* 将标题移动到边框上方 */
    left: 10px;

    /* 根据需要调整左边距 */
    background-color: #409EFF;
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-weight: bold;
}

.basic-info-border2 {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    right: -10px;
    position: relative;
    padding-top: 30px;
    /* 增加内边距，为标题留出更多空间 */
    margin-right: 0px;
    
    /* 调整外边距，使边框线不重合 */
}

.basic-info-border2::before {
    content: "审批信息";
    position: absolute;
    top: -15px;
    /* 将标题移动到边框上方 */
    left: 10px;

    /* 根据需要调整左边距 */
    background-color: #409EFF;
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-weight: bold;
}

.el-row {
  margin-left: 20px; /* 根据需要调整这个值 */
}

/* 如果您想要对特定的行进行偏移，可以添加一个特定的类 */
.el-row-offset {
  margin-left: 20px; /* 同样，根据需要调整这个值 */
}
</style>